import React from "react";
// 导航栏组件
import MyNavBar from "../../components/common/navbar";
import { Grid } from "antd-mobile-v5"

// 获取定位城市
import { getCurrentCity } from "../../utils/index";
import { MapApi } from '../../api/model/map'

import './index.scss'

// 覆盖物样式
const labelStyle = {
  cursor: 'pointer',
  border: '0px solid reb(255, 0, 0)',
  whiteSpace: 'nowrap',
  fontSize: '12px',
  color: 'rgb(255, 255, 255)',
  textAlign: 'center',
  padding: '0',
  backgroundColor: 'transparent'
}

// 小区覆盖物样式
const rectStyle = {
  backgroundColor: 'transparent',
  border: '0px solid rgb(255, 0, 0)',
  padding: '0',
  fontSize: '12px',
}
// 封装流程
// 1.1 渲染覆盖物 renderOverlays() 获取数据   获取覆盖物类型 以及下级地图缩放级别
// 1.2  getTypeAndZoom() 获取覆盖物类型 以及下级地图缩放级别
// 2.1 createOverlays() 创建覆盖物 根据传入的类型 调用对应的方法创建覆盖物
// 2.2 区镇 createCircle() 根据传入的数据创建覆盖物 绑定事件（放大地图，清除覆盖物，渲染下一级房源数据）
// 2.2 小区 createRect()    根据传入的数据创建覆盖物 绑定事 (移动地图，渲染房源列表)

// 1 获取房源数据
// 2 遍历数据，创建覆盖物，给每个覆盖物添加唯一标识
// 3 给覆盖物添加点击事件
// 4 在点击事件中，获取到当前项的唯一标识
// 5 放大地图（级别13）调用clearOverlays() 方法清除当前覆盖物

export default class MNap extends React.Component {
  state: any
  map: any
  constructor(props: any) {
    super(props)
    this.state = {
      houseList: [],
      activeHouse: false
    }
  }

  componentDidMount() {
    this.initMap()
  }

  initMap = () => {
    // 创建地图实例
    const map = new window.BMapGL.Map("container")
    //  作用：能够在其他方法中 通过this 获取地图对象
    this.map = map
    
    map.addEventListener('dragend', () => {
      if (this.state.activeHouse) {
        this.setState({
          activeHouse: false
        })
      }
    })
      

    //创建地址解析器实例
    const myGeo = new window.BMapGL.Geocoder();
    getCurrentCity().then((res: any) => {

      // 将地址解析结果显示在地图上，并调整地图视野
      myGeo.getPoint(res.label, (point: any) => {
        if (point) {
          map.centerAndZoom(point, 11);

          // 添加 常用控件
          map.addControl(new window.BMapGL.NavigationControl())
          map.addControl(new window.BMapGL.ScaleControl())

          this.renderOverlays(res.value)

        } else {
          alert('您选择的地址没有解析到结果！');
        }
      }, res.label)
    })

    // 设置中心点坐标
    const point = new window.BMapGL.Point(116.404, 39.915)
    // 地图初始化
    map.centerAndZoom(point, 15);

    // const curCity = new window.BMapGL.LocalCity()
    // curCity.get(async res => {
    //   console.log(res.name)
    // })
  }

  renderOverlays = (id: string) => {
    // 根据区域id，查询该区域的房源数据
    MapApi.getMap({ id }).then((res: any) => {
      console.log('房源数据', res.body)

      const { nextZoom, type } = this.getTypeAndZoom()

      res.body.forEach((item: any) => {
        this.createOverlays(item, nextZoom, type)
      })
    })
  }


  // 获取覆盖物类型 以及下级地图缩放级别
  getTypeAndZoom = () => {
    // 调用地图的 getZoom() 方法 来获取当前缩放级别
    const zoom = this.map.getZoom()
    let nextZoom, type
    // console.log('当前地图的缩放级别', zoom)
    if (zoom >= 10 && zoom < 12) {
      // 区
      // 下一个缩放级别
      nextZoom = 13
      // circle 圆形覆盖物（区镇）
      type = 'circle'
    } else if (zoom >= 12 && zoom < 14) {
      // 镇
      nextZoom = 15
      type = 'circle'
    } else if (zoom >= 14 && zoom < 16) {
      // 小区
      type = 'rect'
    }

    return { nextZoom, type }
  }

  // 2.1 createOverlays() 创建覆盖物 根据传入的类型 调用对应的方法创建覆盖物
  createOverlays = (data: any, zoom: number, type: string) => {
    // console.log(data, zoom, type)
    const { coord: { longitude, latitude }, label: areaName, count, value } = data
    // console.log(longitude, latitude)
    // 坐标对象
    const areaPoint = new window.BMapGL.Point(longitude, latitude)

    if (type === 'circle') {
      // 区，镇
      this.createCircle(areaPoint, areaName, count, value, zoom)
    } else {
      // 小区
      this.createRect(areaPoint, areaName, count, value)
    }
  }

  // 区镇 createCircle() 根据传入的数据创建覆盖物 绑定事件（放大地图，清除覆盖物，渲染下一级房源数据）
  createCircle = (areaPoint, areaName, count, id, zoom) => {
    // 创建覆盖物
    const label = new window.BMapGL.Label('', {
      //设置标注的地理位置
      position: areaPoint,
      // 设置标注的偏移量
      // offset: new window.BMapGL.Size(10, 20)
    })

    // 给label 对象 一个唯一的标识
    // label.id = id

    // 设置房源覆盖物的内容
    label.setContent(`
      <div class="bubble">
        <p class="name">${areaName}</p>
        <p>${count}套</p>
      </div>
    `)

    // 设置样式
    label.setStyle(labelStyle)

    // 添加点击事件
    label.addEventListener('click', () => {
      // console.log(2222)
      this.renderOverlays(id)

      // 放大地图 已当前点击的覆盖物为中心发大地图
      // 第一个参数 坐标对象
      // 第二个参数 发大级别
      this.map.centerAndZoom(areaPoint, zoom)
      // 清除当前覆盖物
      this.map.clearOverlays()
    })

    // 添加覆盖物到地图中
    this.map.addOverlay(label)
  }

  // 小区 createRect() 根据传入的数据创建覆盖物 绑定事 (移动地图，渲染房源列表)
  createRect = (point, name, count, id) => {
    // 创建覆盖物
    const label = new window.BMapGL.Label('', {
      //设置标注的地理位置
      position: point,
      // 设置标注的偏移量
      offset: new window.BMapGL.Size(-20, -30)
    })

    // 给label 对象 一个唯一的标识
    label.id = id

    // 设置房源覆盖物的内容
    label.setContent(`
      <div class="rect">
        <span class="housename">${name}</span>
        <span class="housenum">${count}套</span>
      </div>
    `)

    // 设置样式
    label.setStyle(rectStyle)

    // 添加点击事件
    label.addEventListener('click', () => {
      this.getHouseList(id)
      this.setState({
        activeHouse: true
      })
      // 清除当前覆盖物
      //this.map.clearOverlays()
    })

    // 添加覆盖物到地图中
    this.map.addOverlay(label)
  }

  // 获取房源数据
  async getHouseList(cityId) {
    await MapApi.getHouses({ cityId }).then((res: any) => {
      res.body.list.map((item: any) => {
        return item.houseImg = 'http://127.0.0.1:8080' + item.houseImg
      })
      // console.log(res.body.list)
      this.setState({
        houseList: res.body.list
      })
    })
  }

  render() {

    return (
      <div className="map">
        <MyNavBar title="地图找房"></MyNavBar>

        {/* 创建地图容器元素 */}
        <div id="container" />

        <div className={this.state.activeHouse ? 'map_house active' : 'map_house'}>

          <div className="map_house_header">
            <h3>房屋列表</h3>
            <span>更多资源</span>
          </div>
          <div style={{overflowY: 'auto',padding:' 0 10px'}}>
            {
              this.state.houseList.map((item: any, index) => {
                return <Grid key={index} columns={3} gap={8} className="border_w2_b map_house_Grid">
                  <Grid.Item>
                    <img className="bor_rd_4" src={item.houseImg} alt="" style={{ width: '100%', height: '70px' }} />
                  </Grid.Item>
                  <Grid.Item span={2}>
                    <div className='map_house_Grid_item'>
                      <p className='map_house_Grid_item_title'>{item.title}</p>
                      <p className='map_house_Grid_item_desc'>{item.desc}</p>
                      <p className='map_house_Grid_item_tags'>
                        {
                          item.tags.map((ele: string, y) => {
                            return <span key={y}>{ele}</span>
                          })
                        }
                      </p>
                      <p className='map_house_Grid_item_price'>
                        {item.price}<small style={{fontSize: '12px'}}> 元/月</small>
                        </p>
                    </div>
                  </Grid.Item>
                </Grid>
              })
            }
          </div>
          

        </div>
      </div>
    )
  }
}